<!--
 * @Author: your name
 * @Date: 2021-02-21 16:16:35
 * @LastEditTime: 2021-02-22 15:36:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\customer-sharing\index.vue
-->
<template>
    <div class="w1200auto">
        <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
        <div class="banner mb50 text_c relative">
            <img :src="require('~/assets/image/customer-sharing/customerSharing_1.png')" alt="" class="bannerloading" id="bannerImg">
            <p class="size36 cfff none banner_title absolute banner_top">{{$t("Show off your glasses style")}}</p>
            <p class="size18 cfff none banner_title absolute banner_bottom">{{$t("Share your unique look and get rewards")}}</p>
        </div>
        <div class="mb50">
            <div class="customer_content">
                <div class="ptb20 plr100 ">
                    <h3 class="mb20 pt20 text_c b cfff size36">{{$t("Share & Gain")}}</h3>
                    <div class="ptb10">
                    <p class="size16 lh15 cfff">{{$t("Take pictures of wearing our glasses and leave them as comments on our website, or Facebook, Instagram and any other social platforms, ")}}</p> 
                    <p class="size16 mb30 lh15 cfff">{{$t("We will award 1000 points to your account (valued $10).")}}</p>
                    <p class="size16 mb30 lh15 cfff">{{$t("If you post videos on Youtube or Tiktok and other social media , we will give 1500 Points (valued $15) to your account.")}}</p>
                    <p class="size16 lh15 cfff">{{$t("Please notify us via email after sharing: service@eyecedar.com.")}}</p>
                    <p class="size16 lh15 cfff">{{$t("Once verified, we will issue store points to your account promptly as a bonus.")}}</p>
                    <p class="size16 mb30 lh15 cfff">{{$t("These points can be used to purchase all our products.")}}</p>
                    <p class="size16 lh15 cfff">{{$t("Please use 'Eyecedar' as the title or keyword to share in your video  or posts.")}}</p>
                    </div>
                    <div class="text_c">
                        <span class="customer_displayForm size28 cfff ptb10 plr50 inline-block pointer gradients" @click="showForm()">{{$t("Create a Show")}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="userBlog">
            <ul class="userBlog_ul flex">
                <li class="li pointer plr10 ptb10 s3 spacing">
                    <div class="relative">
                        <img :src="require('@/assets/image/customer-sharing/Customer-sharing_11.jpg')" class="img" alt="">
                        <div class="userBlog_mask absolute s12 h100">
                            <nuxt-link :to="{name: 'productDetail', query: {id: 14}}" class="absolute gradients userBlog_link size20 b cfff">{{$t("View details")}}</nuxt-link>
                            <div class="userBlog_desc absolute">
                                <p class="userBlog_name cfff size16">Jessica</p>
                                <p class="userBlog_comment cfff size16">These glasses look great!</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="li pointer plr10 ptb10 s3 spacing">
                    <div class="relative">
                        <img :src="require('@/assets/image/customer-sharing/Customer-sharing_13.jpg')" class="img" alt="">
                        <div class="userBlog_mask absolute s12 h100">
                            <nuxt-link :to="{name: 'productDetail', query: {id: 14}}" class="absolute gradients userBlog_link size20 b cfff">{{$t("View details")}}</nuxt-link>
                            <div class="userBlog_desc absolute">
                                <p class="userBlog_name cfff size16">Jessica</p>
                                <p class="userBlog_comment cfff size16">These glasses look great!</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="li pointer plr10 ptb10 s3 spacing">
                    <div class="relative">
                        <img :src="require('@/assets/image/customer-sharing/Customer-sharing_15_1.jpg')" class="img" alt="">
                        <div class="userBlog_mask absolute s12 h100">
                            <nuxt-link :to="{name: 'productDetail', query: {id: 14}}" class="absolute gradients userBlog_link size20 b cfff">{{$t("View details")}}</nuxt-link>
                            <div class="userBlog_desc absolute">
                                <p class="userBlog_name cfff size16">Jessica</p>
                                <p class="userBlog_comment cfff size16">These glasses look great!</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="li pointer plr10 ptb10 s3 spacing">
                    <div class="relative">
                        <img :src="require('@/assets/image/customer-sharing/Customer-sharing_21_1.jpg')" class="img" alt="">
                        <div class="userBlog_mask absolute s12 h100">
                            <nuxt-link :to="{name: 'productDetail', query: {id: 14}}" class="absolute gradients userBlog_link size20 b cfff">{{$t("View details")}}</nuxt-link>
                            <div class="userBlog_desc absolute">
                                <p class="userBlog_name cfff size16">Jessica</p>
                                <p class="userBlog_comment cfff size16">These glasses look great!</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <el-dialog title="" :visible.sync="dialogFormVisible" :show-close="false" width="500px" class="formModel">
            <el-form :model="ruleForm" label-width="150px" ref="ruleForm" :rules="rules">
                <el-form-item label="Product Sku" prop="sku">
                    <el-input v-model="ruleForm.sku" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Upload photos" prop="photos">
                    <el-input v-model="ruleForm.photos" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Post link">
                    <el-input v-model="ruleForm.post" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Video link">
                    <el-input v-model="ruleForm.video" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Describe" prop="describe">
                    <el-input v-model="ruleForm.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <span class="size18 b">{{$t("*These fields are required.")}}</span>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')">{{$t("submit")}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
import { spliteParams } from '~/utils/Utils';
export default {
    async asyncData({ req, params, query, route, store }) {
        // 获取路由层级
        let arr = await spliteParams(route.fullPath);
        return {
            breadcrumbTtem: arr || [],
        }
    },
    data() {
        return {
            ruleForm: {
                sku: '',
                photos: '',
                post: '',
                video: '',
                describe: ''
            },
            dialogFormVisible: false,
            rules: {
                sku:  { required: true, message: this.$t('Please enter the content'), trigger: 'blur' },
                photos:  { required: true, message: this.$t('Please enter the content'), trigger: 'blur' },
                describe:  { required: true, message: this.$t('Please enter the content'), trigger: 'blur' }
            }
        }
    },
    components: {
        BreadCrumb
    },
    methods: {
        /**
         *@param: 
         *@description: 表单提交
         *@author: Mister Wang
         *@date: 2021-02-22 13:59:08
        */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         *@param: 
         *@description: 显示表单
         *@author: Mister Wang
         *@date: 2021-02-22 13:58:56
        */
        showForm () {
            this.dialogFormVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>

    .banner_top {
        left: calc(50% - 217px);
        top: 140px;
    }
    .banner_bottom {
        left: calc(50% - 160px);
        top: 200px;
    }
    .customer_content{
        background: #20cef9;
    }
    .customer_displayForm {
        border: 1px solid #fff;
    }
    .userBlog_mask {
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(46,210,250, .5);
        display: none;
    }
    .userBlog_desc {
        right: 20px;
        bottom: 20px;
    }
    .userBlog_link {
        left: calc(50% - 58px);
        top: calc(50% - 10px);
    }
    .userBlog_ul .li:hover .userBlog_mask {
        display: block;
    }
</style>
<style>
    .formModel .el-form-item__label {
        font-size: 18px;
        text-align: left;
    }
    .formModel .el-input__inner {
        border-radius: 0;
    }
    .formModel .el-button {
        width:100%;
        border-radius: 0;
    }
    .formModel .el-dialog__header {
        display: none;
    }
    .formModel .el-form-item:last-child {
        margin-bottom: 0;
    }
</style>